<template>
  <div>
    <!-- 轮播图 -->
    <swiper :bannerList="bannerList" :isfull="true"></swiper> 
    <!-- 九宫格 -->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/news">
          <!-- <span class="mui-icon mui-icon-home"></span> -->
          <img src="../../images/menu1.png" />
          <div class="mui-media-body">新闻资讯</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/photo">
          <img src="../../images/menu2.png" />
          <div class="mui-media-body">图片展示</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/goodslist">
          <img src="../../images/menu3.png" />
          <div class="mui-media-body">商品列表</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="#">
          <img src="../../images/menu4.png" />
          <div class="mui-media-body">location</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="#">
          <img src="../../images/menu5.png" />
          <div class="mui-media-body">Search</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="#">
          <img src="../../images/menu6.png" />
          <div class="mui-media-body">Phone</div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import swiper from '../subcomponent/swiper.vue'
export default {
  data() {
    return { bannerList: null };
  },
  created() {
    this.getBannerList();
  },
  methods: {
    getBannerList() {
      this.$http.get("banner/list").then(result => {
        if (result.body.status === 0) {
          console.log(result.body.message);

          this.bannerList = result.body.message;
          Toast({
            message: "轮播图加载成功",
            position: "bottom",
            duration: 3000
          });
        }
      });
    }
  },
  components:{
    swiper
  }
};
</script>

<style lang="scss" scoped >

.mui-grid-view.mui-grid-9{
    background-color: #fff;
    border: 0;
    img {
        width: 60px;
    }
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell {
    border: 0;
}
</style>
